<template>
  <div class="mobile-product-detail">
    <div class="product-header">
      <div class="back-button" @click="goBack">
        <i class="el-icon-arrow-left"></i>
      </div>
      <h2>商品详情</h2>
    </div>
    
    <div class="product-info" v-if="product">
      <el-image :src="product.image" fit="contain" class="product-image"></el-image>
      <div class="product-basic-info">
        <h3>{{ product.name }}</h3>
        <p class="product-id">ASIN: {{ product.asin }}</p>
        <p class="product-id">SKU: {{ product.sku }}</p>
        <div class="product-price">{{ product.currency }} {{ product.price }}</div>
        <div class="product-stock">
          <span class="stock-label">库存状态:</span>
          <el-tag :type="getStockStatusType(product.stockStatus)">
            {{ getStockStatusText(product.stockStatus) }}
          </el-tag>
        </div>
      </div>
      
      <div class="product-stats">
        <div class="stat-item">
          <div class="stat-value">{{ product.amazonStock }}</div>
          <div class="stat-label">亚马逊库存</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ product.localStock }}</div>
          <div class="stat-label">本地库存</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ product.linkedSkus }}</div>
          <div class="stat-label">关联SKU数</div>
        </div>
      </div>
      
      <el-divider content-position="left">关联SKU列表</el-divider>
      
      <div class="linked-skus">
        <div v-for="sku in linkedSkus" :key="sku.id" class="sku-card" @click="viewSkuDetail(sku)">
          <el-image :src="sku.image" fit="contain" class="sku-image"></el-image>
          <div class="sku-info">
            <div class="sku-name">{{ sku.name }}</div>
            <div class="sku-code">{{ sku.sku }}</div>
            <div class="sku-quantity">需求数量: <span class="quantity">{{ sku.quantity }}</span></div>
            <div class="sku-stock">
              <span class="stock-label">库存: </span>
              <span :class="['stock-value', getStockClass(sku.stockStatus)]">{{ sku.stock }}</span>
              <el-tag size="mini" :type="getStockStatusType(sku.stockStatus)">
                {{ getStockStatusText(sku.stockStatus) }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="loading-container" v-else>
      <el-skeleton :rows="10" animated />
    </div>
    
    <!-- SKU详情抽屉 -->
    <el-drawer
      title="SKU详情"
      :visible.sync="skuDrawerVisible"
      direction="rtl"
      size="90%"
      :with-header="true"
    >
      <div class="sku-detail-drawer" v-if="currentSku">
        <el-image :src="currentSku.image" fit="contain" class="sku-detail-image"></el-image>
        <div class="sku-detail-info">
          <h3>{{ currentSku.name }}</h3>
          <p class="sku-detail-code">SKU编码: {{ currentSku.sku }}</p>
          <div class="sku-detail-stock">
            <div class="detail-item">
              <span class="detail-label">当前库存:</span>
              <span :class="['detail-value', getStockClass(currentSku.stockStatus)]">{{ currentSku.stock }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">最低库存:</span>
              <span class="detail-value">{{ currentSku.minStock }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">库存状态:</span>
              <el-tag size="small" :type="getStockStatusType(currentSku.stockStatus)">
                {{ getStockStatusText(currentSku.stockStatus) }}
              </el-tag>
            </div>
          </div>
          
          <el-divider content-position="left">库存记录</el-divider>
          
          <div class="sku-records">
            <div v-for="record in skuRecords" :key="record.id" class="record-item">
              <div class="record-time">{{ record.time }}</div>
              <div class="record-content">
                <div class="record-type" :class="record.type === 'inbound' ? 'inbound' : 'outbound'">
                  {{ record.type === 'inbound' ? '入库' : '出库' }}
                </div>
                <div class="record-quantity">
                  {{ record.type === 'inbound' ? '+' : '-' }}{{ record.quantity }}
                </div>
                <div class="record-operator">操作人: {{ record.operator }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'MobileProductDetail',
  data() {
    return {
      product: null,
      linkedSkus: [],
      skuDrawerVisible: false,
      currentSku: null,
      skuRecords: []
    }
  },
  created() {
    this.fetchProductDetail();
  },
  methods: {
    fetchProductDetail() {
      // 模拟API请求获取商品详情
      setTimeout(() => {
        this.product = {
          id: 1,
          name: '多功能厨房刀具套装 - 专业级不锈钢刀具 5件套',
          asin: 'B07X1KRPVS',
          sku: 'KS-5PC-PRO',
          image: 'https://via.placeholder.com/300',
          currency: '$',
          price: 49.99,
          amazonStock: 32,
          localStock: 15,
          linkedSkus: 5,
          stockStatus: 'sufficient'
        };
        
        this.fetchLinkedSkus();
      }, 500);
    },
    fetchLinkedSkus() {
      // 模拟API请求获取关联SKU
      setTimeout(() => {
        this.linkedSkus = [
          {
            id: 1,
            name: '不锈钢主厨刀',
            sku: 'KN-CHEF-01',
            image: 'https://via.placeholder.com/150',
            quantity: 1,
            stock: 25,
            minStock: 10,
            stockStatus: 'sufficient'
          },
          {
            id: 2,
            name: '不锈钢面包刀',
            sku: 'KN-BREAD-01',
            image: 'https://via.placeholder.com/150',
            quantity: 1,
            stock: 18,
            minStock: 10,
            stockStatus: 'sufficient'
          },
          {
            id: 3,
            name: '不锈钢削皮刀',
            sku: 'KN-PEEL-01',
            image: 'https://via.placeholder.com/150',
            quantity: 1,
            stock: 12,
            minStock: 10,
            stockStatus: 'sufficient'
          },
          {
            id: 4,
            name: '不锈钢剪刀',
            sku: 'KN-SCIS-01',
            image: 'https://via.placeholder.com/150',
            quantity: 1,
            stock: 8,
            minStock: 10,
            stockStatus: 'warning'
          },
          {
            id: 5,
            name: '刀具收纳架',
            sku: 'KN-RACK-01',
            image: 'https://via.placeholder.com/150',
            quantity: 1,
            stock: 5,
            minStock: 10,
            stockStatus: 'critical'
          }
        ];
      }, 800);
    },
    fetchSkuRecords(skuId) {
      // 模拟API请求获取SKU库存记录
      setTimeout(() => {
        this.skuRecords = [
          {
            id: 1,
            time: '2023-05-15 09:30',
            type: 'inbound',
            quantity: 10,
            operator: '张三'
          },
          {
            id: 2,
            time: '2023-05-16 14:20',
            type: 'outbound',
            quantity: 3,
            operator: '李四'
          },
          {
            id: 3,
            time: '2023-05-18 11:15',
            type: 'inbound',
            quantity: 5,
            operator: '张三'
          },
          {
            id: 4,
            time: '2023-05-20 16:45',
            type: 'outbound',
            quantity: 2,
            operator: '王五'
          }
        ];
      }, 300);
    },
    goBack() {
      this.$router.go(-1);
    },
    viewSkuDetail(sku) {
      this.currentSku = sku;
      this.fetchSkuRecords(sku.id);
      this.skuDrawerVisible = true;
    },
    getStockStatusType(status) {
      const types = {
        sufficient: 'success',
        warning: 'warning',
        critical: 'danger',
        outOfStock: 'info'
      };
      return types[status] || 'info';
    },
    getStockStatusText(status) {
      const texts = {
        sufficient: '充足',
        warning: '警告',
        critical: '紧急',
        outOfStock: '缺货'
      };
      return texts[status] || '未知';
    },
    getStockClass(status) {
      const classes = {
        sufficient: 'stock-sufficient',
        warning: 'stock-warning',
        critical: 'stock-critical',
        outOfStock: 'stock-out'
      };
      return classes[status] || '';
    }
  }
}
</script>

<style scoped>
.mobile-product-detail {
  padding: 0;
  background-color: #f5f7fa;
  min-height: 100vh;
}
.product-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.back-button {
  font-size: 20px;
  margin-right: 15px;
  cursor: pointer;
}
.product-header h2 {
  margin: 0;
  font-size: 18px;
}
.product-info {
  padding: 15px;
}
.product-image {
  width: 100%;
  height: 200px;
  border-radius: 8px;
  margin-bottom: 15px;
  background-color: #fff;
}
.product-basic-info {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}
.product-basic-info h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  line-height: 1.4;
}
.product-id {
  margin: 5px 0;
  color: #606266;
  font-size: 14px;
}
.product-price {
  font-size: 18px;
  font-weight: bold;
  color: var(--primary-color);
  margin: 10px 0;
}
.product-stock {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.stock-label {
  margin-right: 10px;
  color: #606266;
}
.product-stats {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}
.stat-item {
  text-align: center;
  flex: 1;
}
.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}
.stat-label {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}
.linked-skus {
  margin-top: 10px;
}
.sku-card {
  display: flex;
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.sku-image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  margin-right: 10px;
}
.sku-info {
  flex: 1;
}
.sku-name {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}
.sku-code {
  font-size: 12px;
  color: #606266;
  margin-bottom: 5px;
}
.sku-quantity {
  font-size: 12px;
  margin-bottom: 5px;
}
.quantity {
  font-weight: bold;
}
.sku-stock {
  display: flex;
  align-items: center;
  font-size: 12px;
}
.stock-label {
  color: #606266;
  margin-right: 5px;
}
.stock-value {
  font-weight: bold;
  margin-right: 5px;
}
.stock-sufficient {
  color: var(--success-color);
}
.stock-warning {
  color: var(--warning-color);
}
.stock-critical {
  color: var(--danger-color);
}
.stock-out {
  color: var(--text-secondary);
}
.loading-container {
  padding: 20px;
}
.sku-detail-drawer {
  padding: 15px;
}
.sku-detail-image {
  width: 100%;
  height: 200px;
  border-radius: 8px;
  margin-bottom: 15px;
}
.sku-detail-info h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
}
.sku-detail-code {
  color: #606266;
  font-size: 14px;
  margin-bottom: 15px;
}
.sku-detail-stock {
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}
.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.detail-label {
  width: 80px;
  color: #606266;
}
.detail-value {
  font-weight: bold;
}
.sku-records {
  margin-top: 10px;
}
.record-item {
  border-bottom: 1px solid #ebeef5;
  padding: 10px 0;
}
.record-time {
  font-size: 12px;
  color: #909399;
  margin-bottom: 5px;
}
.record-content {
  display: flex;
  align-items: center;
}
.record-type {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 10px;
}
.inbound {
  background-color: rgba(0, 194, 168, 0.1);
  color: var(--success-color);
}
.outbound {
  background-color: rgba(255, 71, 87, 0.1);
  color: var(--danger-color);
}
.record-quantity {
  font-weight: bold;
  margin-right: 10px;
}
.record-operator {
  font-size: 12px;
  color: #606266;
}
</style> 